<template>
  <view class="sureFill">
    <uni-nav-bar :title="customer.customers_name" color="#333" left-icon="left" @clickLeft="redirectTo('index/filling')"
      statusBar></uni-nav-bar>
    <environment></environment>
    <view class="center">
      <view class="cen" v-if="customer.status === '2'">
        今日加注量已达{{ customer.amount }}公斤，继续加注请联系工作人员
        <text @click="telCall(customer.mobile)">{{ customer.mobile }}</text>
      </view>
      <view class="cen" v-if="customer.status === '-1'">
        余额不足，请联系工作人员
        <text @click="telCall(customer.mobile)">{{ customer.mobile }}</text>
      </view>
      <view @click="orderList" class="cen1" :style="{
          background: customer.status === '1' ? 'linear-gradient(0deg, #2b93ed, #1c70c5)' : '#999',
        }">
        <text v-if="textArea === '0'">开始</text>
        <text v-if="textArea === '0'">加注</text>
        <text v-if="textArea !== '0'">{{ textArea }}</text>
      </view>
      <view class="cen2" v-if="customer.status === '1'">点击“开始加注”即可</view>
      <view class="cen2" style="color:#2b93ed;margin-top:20rpx;" v-if="customer.status === '-1'" @click="jump()">
        使用其他身份加注>></view>
      <view @click="navTo('order/fillingOrder')" class="cen3">查看订单</view>
      <view class="cen5" @click="follow()">关注公众号</view>
      <!-- 浮窗按钮 -->
      <drag-button :isDock="true" :existTabBar="true" @btnClick="redirectTo('index/filling')"
        @btnTouchstart="btnTouchstart" @btnTouchend="btnTouchend" />
      <view class="cen4">请确定您当前位置是在加注机旁</view>
    </view>
    <!-- 加注机状态； -->
    <FillStatus @fillStatus="fillStatus" ref="filling"></FillStatus>
    <webWechat></webWechat>
  </view>
</template>

<script setup lang="ts">
  import { orderJ, fillingListA } from '@/gql/filling';
  import webWechat from '@c/pobulic/webWechat.vue';
  import { getDriverID } from '@/stores/driverID';
  import environment from '@c/pobulic/environment.vue';
  import { navTo, redirectTo, navBack } from '@/utils/navigator';
  import dragButton from '@/components/drag-button/drag-button.vue';
  import { showLoading, showToast, errorToast } from '@/utils/prompt';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { follow, telCall } from '@/utils/copyText';
  import { toPublish } from '@mqtt';
  import FillStatus from '@c/canCode/fillingStatus.vue';
  import { ref } from 'vue';
  /**
   * @component
   * @desc 大客户联营机大客户加注页面
   * @property {Number} driver_id 用户ID
   * @property {Number} fillingID 加注机ID//编码
   * @property {String} textArea 加注机无状态提示
   * @property {Null} filling 加注机状态值
   * @property {Object} customer 大客户加注金额及公斤数
   */
  // static
  const driver_id = getDriverID();
  const fillingID = uni.getStorageSync('fillingID');

  const customer = ref({});
  const textArea = ref('0');
  const filling = ref(null);

  const repeat = ref(true)//放重复点击
  const timeRepeat = ref(true)//放重复点击

  onLoad((options) => {
    uni.setStorageSync('customers_id', options.id);
    fillLists();
  });
  onShow(() => {
    setTimeout(() => {
      viewUsers();
    }, 300);
  });
  function viewUsers() {
    const customers_id = uni.getStorageSync('customers_id');
    const payload = {
      customers_id,
      driver_id,
      fill_id: fillingID,
    };
    toPublish('driver/checkFilling', payload, (obj : any) => {
      const { data } = obj;
      customer.value = data;
    });
  }
  /**
   * 获取加注机详情
   */
  function fillLists() {
    showLoading('加载中');
    const fillID = uni.getStorageSync('fillingID');
    if (!fillID) {
      uni.hideLoading();
      errorToast('扫码失败 请重新扫描')
      setTimeout(() => {
        navBack()
      }, 1000);
      return;
    }
    const payload = {
      query: fillingListA,
      variables: {
        driver_id,
        id: fillID + '',
      },
    };
    toPublish('ql/driver/getFilling', payload, (obj : any) => {
      uni.hideLoading();
      const { fill } = obj.data;
      uni.setStorageSync('jzjfilling', fill.imsi);
    });
  }
  function orderList() {
    if (customer.value.status !== '1') {
      showToast('暂无加注权限');
      return;
    } else if (textArea.value != '0') {
      return;
    }
    if (!timeRepeat.value) {
      return
    }
    timeRepeat.value = false
    showLoading();
    const payload = {
      query: orderJ,
      variables: { driver_id },
    };
    toPublish('ql/driver/doFillingOrderId', payload, (obj : any) => {
      const { do_filling_order_id } = obj.data;
      if (do_filling_order_id.order_id) {
        showToast('您有一个订单正在进行中');
        setTimeout(() => {
          timeRepeat.value = true
          navTo(`canCode/canState?id=${do_filling_order_id.order_id}`);
        }, 600);
      } else {
        // 提交检测加注机状态
        filling.value.FillingMachine();
        // 订阅加注机返回信息
        filling.value.ComeBackFilling();
      }
    });
  }
  /**
   * 加注机状态
   */
  function fillStatus(num : string) {
    if (num == 'task_ready_ack' || num == 'circle_upload_ack') {
      timeRepeat.value = true
      submit();
    } else {
      showToast('当前加注机繁忙 请稍后重试');
      let i = 10;
      let timer = setInterval(() => {
        textArea.value = +i + 's';
        i--;
        if (i < 0) {
          timeRepeat.value = true
          textArea.value = '0';
          clearInterval(timer);
        }
      }, 1000);
      return;
    }
  }
  /**
   * 大客户提交订单
   */
  function submit() {
    showLoading('正在提交');
    const payload = {
      order_type: 'customers_filling',
      type: 'ration',
      driver_id,
      latitude: 34.79977,
      longitude: 113.66072,
      price: customer.value.price,
      count: customer.value.nums,
      union_id: 0,
      fill_id: fillingID,
      platform: 'wechat',
      paytype: 'money',
    };
    if (!repeat.value) {
      return
    }
    repeat.value = false
    toPublish('order_filling/addOrder', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        submit_s(obj.data.order_id);
      } else {
        repeat.value = true
        showToast(msg);
      }
    });
  }
  /**
   * 大客户司机支付
   * @property {String} order_id 订单ID
   */
  function submit_s(order_id : string) {
    showLoading();
    const customers_id = uni.getStorageSync('customers_id');
    const payload = {
      order_id,
      pay_type: 'money',
      cart_code: '',
      from_driver_id: '',
      order_type: 'customers_filling',
      route: '',
      mileage: '',
      customers_id,
      driver_id,
    };
    toPublish('order_filling/editOrder', payload, (obj : any) => {
      SubmitResults(obj);
    });
  }
  /**
   * 大客户司机支付返回信息
   * @property {Object} obj 支付返回信息
   */
  function SubmitResults(obj : any) {
    const { code, msg, data } = obj;
    if (code === 1) {
      payFors(data.order_id);
    } else {
      repeat.value = true
      showToast(msg);
    }
  }
  /**
   * 大客户司机支付返回信息
   * @property {String} num 订单ID
   */
  function payFors(num : string) {
    showLoading()
    const payload = {
      driver_id,
      order_id: num,
    };
    toPublish('order_filling/payQuota', payload, (obj : any) => {
      const { code, data, msg } = obj;
      repeat.value = true
      if (code === 1) {
        viewUsers();
        navTo(`canCode/canState?id=${data.order_id}`);
      } else {
        errorToast(msg);
      }
    });
  }
  function jump() {
    uni.navigateTo({
      url: customer.value.page
    });
  }
</script>

<style lang="less">
  .sureFill {
    width: 100%;
    height: 100vh;
    background-color: white;
  }

  .center {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .cen {
      width: 90%;
      margin: 20rpx auto;

      text {
        color: #2381d8;
      }
    }

    .cen1 {
      width: 260rpx;
      height: 260rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(0deg, #2b93ed, #1c70c5);
      border-radius: 50%;
      font-size: 60rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 3vh;
    }

    .cen2 {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 50rpx;
    }

    .cen3 {
      width: 197rpx;
      height: 66rpx;
      background: linear-gradient(0deg, #2b93ed, #1c70c5);
      border-radius: 10rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 66rpx;
      margin-top: 10vh;
    }

    .cen3 {
      width: 197rpx;
      height: 66rpx;
      background: linear-gradient(0deg, #2b93ed, #1c70c5);
      border-radius: 10rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 66rpx;
      margin-top: 40rpx;
    }

    .cen5 {
      width: 197rpx;
      height: 66rpx;
      border-radius: 10rpx;
      border: 1px solid #2381d8;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2381d8;
      text-align: center;
      line-height: 66rpx;
      margin-top: 40rpx;
    }

    .cen4 {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2381d8;
      margin-top: 20vh;
    }
  }

  .sure_4 {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
  }
</style>